<script>
// 顶部tab+页面切换
import { defineComponent } from 'vue'
export default defineComponent({
	name: 'WeworkQr'
})
</script>
<script setup>
import { ref } from 'vue'
import { toRaw } from '@vue/reactivity'
import List from './list.vue'
import Data from './data.vue'
import EditQr from './list/editQr.vue'
import bottomCopyringht from '../../../components/bottom-copyright.vue'
const data = ref(null)
const dialogVisible = ref(false)
const module = ref('List')
const editQr = ref(null)
const showEdit = (val) => {
	if (val) {
		editQr.value.show(toRaw(val).id)
	} else {
		editQr.value.show()
	}
	dialogVisible.value = true
}
const qrToData=(id)=>{
	module.value = 'Data'
	setTimeout(()=>{
		if (typeof(id) == 'number') data.value.show(id)
		else data.value.show()
	},5)
	
}
</script>
<template>
	<div>
		<div v-if="!dialogVisible">
			<div class="app-tab app-tab-margin-top">
				<div @click="module = 'List'" :class="module == 'List' ? 'app-tab-item-active' : 'app-tab-item'">渠道列表</div>
				<div @click="qrToData" :class="module == 'Data' ? 'app-tab-item-active' : 'app-tab-item'">数据详情</div>
			</div>
			<List v-if="module == 'List'" @showEditQr="showEdit" @qrToData="qrToData($event,val)" />

			<Data v-else ref="data" />
		</div>
		<EditQr ref="editQr" @goBack="dialogVisible = false" />
		<bottomCopyringht></bottomCopyringht>
	</div>
</template>
<style lang="scss">
@import url('../../../style/app-component.scss');
@import '../../../style/mixin.scss';
</style>
